<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js"></script>
		<!--<script src="__PUBLIC__/midi/js/select-time.js"></script>-->
		<script src="__PUBLIC__/midi/js/public.js"></script>
		<script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
	    <style>
	         .stu-info{
	         	background-color: #f5f5f7;
	         }
	    	.title{
	    		width: 1200px;
	    		margin: 0 auto;
	    		height: 60px;
	    		background-color: #f7f7f7;
	    		border: 1px solid #d1d1d1;
	    	}
	    	.title p{
	    		font-size: 2.8rem;
	    		color: #333;
	    		text-align: center;
	    		line-height: 60px;
	    	}
	    	.stu-info .con{
	    		width: 1200px;
	    		margin: 0 auto;
	    		padding-top: 51px;
	    	}
	    	.stu-info .con .inner{
	    		padding-bottom: 50px;
	    	}
	    	.info-baoming{
	    		padding: 0 302px;
	    		background-color: #fff;
	    		padding-top: 68px;
	    		padding-bottom: 58px;
	    	}
	    	.info-baoming h2{
	    		text-align: center;
                font-size: 2rem;
                color: #333;
                margin-bottom: 54px;
	    	}
	    	.info-baoming .baoming-item{
	    		margin-bottom: 18px;
	    	}
	    	.info-baoming .baoming-item span{
	    		font-size: 20px;
	    		margin-right: 16px;
	    		width: 94px;
	    		display: inline-block;
	    		text-align: right;
	    	}
	    	.info-baoming .baoming-item input{
	    		width: 392px;
                height: 42px;
                border-radius: 2px;
                border-color: #d1d1d1;
                outline: none;
	    	}
	    	.info-baoming .riqi .riqi-div{
	    		display: inline-block;
	    		width: 394px;
	    		height: 44px;
	    		position: relative;
	    	}
	    	.info-baoming .riqi div img{
	    		position: absolute;
	    		top: 17px;
	    		right: 8px;
	    	}
	    	.info-baoming .riqi .calendar{
	    		width: 394px;
	    		height: 154px;
	    		z-index: 99;
	    		background-color: #fff;
	    		position: absolute;
	    		top: 44px;
	    		box-shadow:0 5px 5px rgba(0,0,0,0.15);
	    		display: none;
	    	}
	    	.info-baoming .riqi .calendar table{
	    		width: 100%;
	    	}
	    	.info-baoming .riqi .calendar table .first{
	    		height: 48px;
	    		background-color: #ecf0f1;
	    	}
	    	.info-baoming .riqi .calendar table tr{
	    		height: 54px;
	    	}
	    	.info-baoming table tr td{
	    		text-align: center;
	    	}
	    	.info-baoming p{
	    		position: relative;
                width: 272px;
                margin: 0 auto;
                margin-top: 38px;
                margin-bottom: 28px;
	    	}
	    	.info-baoming p input{
	    		width: 20px;
	    		height: 20px;
	    		margin-right: 12px;
	    	}
	    	.info-baoming p span{
	    		position: absolute;
	    		top: 50%;
	    		margin-top: -11px;
	    		font-size: 1.6rem;
	    	}
	    	.info-baoming p span i{
	    		color: #29d0c9;
	    	}
	    	.info-baoming a{
	    		width: 210px;
	    		margin: 0 auto;
                height: 50px;
                display: block;
                background-color: #29d0c9;
                color: #fff;
                border-radius: 2px;
                line-height: 50px;
                text-align: center;
                font-size: 2.4rem;
	    	}
	    	.info-chaxun{
	    		padding-top: 46px;
	    		margin-top: 50px;
	    		background-color: #fff;
	    		padding-bottom: 60px;
	    	}
	    	.info-chaxun h4{
	    		font-size: 2rem;
                text-align: center;
                margin-bottom: 44px;
	    	}
	    	.info-chaxun div{
	    		padding-left: 250px;
	    	}
	    	.info-chaxun div span{
	    		font-size: 2rem;
                margin-right: 24px;
	    	}
	    	.info-chaxun div input{
	    		width: 392px;
                height: 42px;
                border-radius: 2px;
                border-color: #d1d1d1;
                margin-bottom: 38px;
	    	}
	    	.info-chaxun a{
	    		width: 210px;
	    		margin: 0 auto;
                height: 50px;
                display: block;
                background-color: #29d0c9;
                color: #fff;
                border-radius: 2px;
                line-height: 50px;
                text-align: center;
                font-size: 2.4rem;
	    	}
	    	.ps{
	    		width: 100%;
	    		height: 500px;
	    		background: url(__PUBLIC__/midi/baoming_img/bg.png) ;
	    	}
	    	.ps .con{
	    		width: 1200px;
	    		margin: 0 auto;
	    	}
	    	.ps .con .inner{
	    		padding: 97px 0;
	    	}
	    	.ps .inner ul li{
	    		width: 580px;
                height: 140px;
                background-color: #fffff9;
                opacity: 0.6;
                font-size: 4rem;
                color: #363636;
                text-align: center;
                line-height: 140px;
                float: left;
                transition: all 0.3s linear;
	    	}
	    	.ps .inner ul .margin-right{
	    		margin-right: 40px;
	    	}
	    	.ps .inner ul .margin-bottom{
	    		margin-bottom: 26px;
	    	}
	    	.ps ul li a{
	    		cursor: pointer;
	    	}
	    	.otherMonth{
	    		color: #ccc;
	    	}
	    	.currenDay{
	    		color: #333;
	    	}
	    	@media only screen and (min-width:1201px ) {
	    		.baoming-mb,.tijiao-btn,.p{
	    			display: none;
	    		}
	    	}

	    </style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<!--考生信息-->
		<div class="stu-info">
			<div class="con">
				<!--报名标题-->
                 <div class="title">
	                 <p>欢迎来到迷笛考级考试报名入口</p>
                 </div>
                <!--报名标题结束-->
				<div class="inner">
					<div class="info-baoming">
						<h2>请填选您的考生信息</h2>
				        <div class="baoming-item">
				    	   <span>姓名 :</span>
						   <input type="text" />
				        </div>
				        <div class="baoming-item">
				    	   <span>性别 :</span>
						   <input type="text" />
				        </div>
				        <div class="baoming-item">
				    	    <span>考试地点 :</span>
						    <input type="text" />
				        </div>
				        <div class="baoming-item">
				    	   <span>考试专业 :</span>
						   <input type="text" />
				        </div>
				        <div class="baoming-item">
				    	   <span>考试等级 :</span>
						   <input type="text" />
				        </div>
				        <div class="baoming-item riqi">
				    	   <span>考试时间 :</span>
						   <div class="riqi-div">
						   	  <input type="text" id="text"/>
						   	  <img src="__PUBLIC__/midi/baoming_img/bm_xiangxia.png" id="inputtime"/>
						   	  <div class="calendar" id="calendar"></div>
						   </div>
				        </div>
				        <p>
				    	    <input type="checkbox" />
				    	    <span>我确认同意<i>《迷笛考级考试须知》</i></span>
				        </p>
				        <a href="baoming_zhifu.html">立即报名</a>
					</div>
				    <div class="info-chaxun">
				    	<h4>证书查询</h4>
				        <div>
				    	  <span>请输入证书编号</span>
						  <input type="text" />
				        </div>
				        <a href="zscx.html">立即查询</a>
				    </div>
				</div>
			</div>
		</div>
		<!--考生信息结束-->
		<!--流程开始-->
		<div class="ps">
			<div class="con">
				<div class="inner">
					<ul>
						<li class="margin-right margin-bottom"><a href="kjlc.html">考级流程</a></li>
						<li class="margin-bottom"><a href="bkzn.html">备考指南</a></li>
						<li class="margin-right"><a href="yinpin.html">音频视频</a></li>
						<li><a href="qpjc.html">曲谱教程</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!--流程结束-->
		<!--迷笛品牌开始-->
		<div class="pinpai">
			<div class="con">
				<h3>迷笛品牌</h3>
				<ul>
					<li>
						<a><img src="__PUBLIC__/midi/img/beijingjazz.png" /></a>
					</li>
					<li>
						<a><img src="__PUBLIC__/midi/img/ELECTRONIC.png" /></a>
					</li>
					<li>
						<a><img src="__PUBLIC__/midi/img/taihumidi.png" /></a>
					</li>
					<li>
						<a><img src="__PUBLIC__/midi/img/midikids.png" /></a>
					</li>
					<li>
						<a><img src="__PUBLIC__/midi/img/nidiyinyuejie.png" /></a>
					</li>
					<li>
						<a><img src="__PUBLIC__/midi/img/julebu.png" /></a>
					</li>
					<li>
						<a><img src="__PUBLIC__/midi/img/weiyuanhui.png" /></a>
					</li>
				</ul>
			</div>
		</div>
		<!--迷笛品牌结束-->
		<!--首页尾部开始-->
		<footer>
			<div class="con">
				<div class="footer-top">
				   <div class="footer-logo clearFix">
					   <a><img src="__PUBLIC__/midi/img/logokaoji.png"/></a>
				   </div>
				   <ul class="clearFix">
					   <li><img src="__PUBLIC__/midi/img/iconfont-tel-bling.png"/>电话：400 684 0456</li>
					   <li><img src="__PUBLIC__/midi/img/iconfont-weixin(1).png"/>微信：midileval</li>
					   <li><img src="__PUBLIC__/midi/img/iconfont-youxiang.png"/>邮箱：info@midileval</li>
					   <li><img src="__PUBLIC__/midi/img/iconfont-dizhi.png"/>地址：北京市海淀区世纪城远大圆5区8号楼</li>
				    </ul>
				    <dl class="clearFix">
					    <dt class="margin-bottom">新闻动态 NEWS</dt>
					    <dd class="margin-bottom">2017迷笛音乐节全年主题-点亮眼睛</dd>
					    <dd class="margin-bottom">迷笛全国音乐考级落地廊坊</dd>
					    <dd>教育/北京迷笛音乐学校推广国内现代音乐考级...</dd>
				    </dl>
			     </div>
			   <p>Copyright 2015.版权归迷笛所有 All Rights Reserved</p>
			</div>
		</footer>
		<!--首页尾部结束-->
		<script>
			(function(){
  /*
   * 用于记录日期，显示的时候，根据dateObj中的日期的年月显示
   */
var dateObj = (function(){
    var _date = new Date();    // 默认为当前系统时间
    return {
      getDate : function(){
        return _date;
      },
      setDate : function(date) {
        _date = date;
      }
    };
})();

  // 设置calendar div中的html部分
  renderHtml();
  // 表格中显示日期
showCalendarData();
  // 绑定事件
//bindEvent();

  /**
   * 渲染html结构
   */
  function renderHtml() {
    var calendar = document.getElementById("calendar");
    console.log(calendar);
    var bodyBox = document.createElement("div");  // 表格区 显示数据
    // 设置表格区的html结构
    bodyBox.className = 'calendar-body-box';
    var _headHtml = "<tr class='first'>" +
              "<th>日</th>" +
              "<th>一</th>" +
              "<th>二</th>" +
              "<th>三</th>" +
              "<th>四</th>" +
              "<th>五</th>" +
              "<th>六</th>" +
            "</tr>";
    var _bodyHtml = "";

    // 一个月最多31天，所以一个月最多占6行表格
    for(var i = 0; i < 2; i++) {
      _bodyHtml += "<tr>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
              "<td></td>" +
            "</tr>";
    }
    bodyBox.innerHTML = "<table id='calendarTable' class='calendar-table'>" +
              _headHtml + _bodyHtml +
              "</table>";
    // 添加到calendar div中
    calendar.appendChild(bodyBox);
  }

  /**
   * 表格中显示数据，并设置类名
   */
  function showCalendarData() {
    var _year = dateObj.getDate().getFullYear();
    var _month = dateObj.getDate().getMonth() + 1;
    var _dateStr = getDateStr(dateObj.getDate());
    // 设置表格中的日期数据
    var _table = document.getElementById("calendarTable");
    var _tds = _table.getElementsByTagName("td");
    var _firstDay = new Date(_year, _month - 1, 1);  // 当前月第一天
    for(var i = 0; i < _tds.length; i++) {
      var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
      var _thisDayStr = getDateStr(_thisDay);
      _tds[i].innerText = _thisDay.getDate();
      _tds[i].setAttribute('data', _thisDayStr);
      if(_thisDayStr.substr(0,6) == getDateStr(_firstDay).substr(0,6)){
      	  if(_thisDayStr.substr(6,1) == 0){
      	  	if(_thisDayStr.substr(7,1)<=7){
      	  	   _tds[i].className = "currentDay";
      	     }else{
      	  	   _tds[i].className = "otherMonth";
      	      }
      	  }else{
      	  	_tds[i].className = "otherMonth";
      	  }
      }else{
      	_tds[i].className = "otherMonth";
      }
    }
  }

  /**
   * 绑定事件
   */
  function addEvent(dom, eType, func) {
    if(dom.addEventListener) {  // DOM 2.0
      dom.addEventListener(eType, function(e){
        func(e);
      });
    } else if(dom.attachEvent){  // IE5+
      dom.attachEvent('on' + eType, function(e){
        func(e);
      });
    } else {  // DOM 0
      dom['on' + eType] = function(e) {
        func(e);
      }
    }
  }
  /**
   * 日期转化为字符串， 4位年+2位月+2位日
   */
  function getDateStr(date) {
    var _year = date.getFullYear();
    var _month = date.getMonth() + 1;    // 月从0开始计数
    var _d = date.getDate();

    _month = (_month > 9) ? ("" + _month) : ("0" + _month);
    _d = (_d > 9) ? ("" + _d) : ("0" + _d);
    return _year + _month + _d;
  }
  $("#inputtime").on("click",function(){
  	$("#calendar").slideDown();
  })
  $(".currentDay").on("click",function(){
  	var _year = dateObj.getDate().getFullYear();
    var _month = dateObj.getDate().getMonth() + 1;
    var _day = $(this).html();
    $("#text").val(_year+"-"+_month+"-"+_day);
    $("#calendar").slideUp();
  })



})();
$(function(){
				$(".ps ul li").hover(
					function(){
						$(this).css({'background-color':'#29d0c9'}),
						$(this).find("a").css({'color':'#fff'})
					},
					function(){
						$(this).css({'background-color':'#fffff9'}),
						$(this).find("a").css({'color':'#363636'})
					}
				)
			})
		</script>
	</body>
</html>
